<template>
	<view class="term">
		<view class="lv">
			<!-- <image class="bei" src="../../static/term/neng.png"></image> -->
			<view class="term-center">
				<image class="term-img-logo" src="../../static/term/logo.png"></image>
				<view class="dis" style="margin-bottom: 25rpx;margin-top: 10rpx;">
					<view class="inp">
						<input disabled @click="seek" placeholder="搜索" v-model="seach" />
						<image src="../../static/term/sou.png"></image>
					</view>
					<view class="dis"
						style="margin-left: 30rpx;width: 20%;text-align: center;font-size: 24rpx;z-index: 1000;">
						<view>
							<u-icon name="bell-fill" size="35" @tap="news"></u-icon>
							<view style="color: #FFFFFF;" @tap="news">消息</view>
						</view>
						<view style="line-height: 29rpx;">
							<image style="width: 33rpx; height: 35rpx;" src="../../static/term/ka.png" @tap="punch">
							</image>
							<view @tap="punch">打卡</view>
						</view>
					</view>
				</view>
				<swiper autoplay="true" duration="600" interval="4000" circular="true" indicator-active-color="#ffffff"
					 style="border-radius: 20rpx; ">
					<swiper-item class="item" v-for="(item,index) in list" :key='index'>
						<image :src="item.imges"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view class="term-bei">
				<view class="term-yuan"></view>
			</view> -->
		</view>
		
		<view class="term-list">
			<view class="list u-m-b-20" v-if="userInfo.yesNo">
				<view class="flex" @click="term(item)" v-for="(item,index) in listImage" :key="index">
					<image :src="item.img"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view >
				<view class="list">
					<view class="flex" style="margin-bottom: 20rpx;" @click="term1(item)" v-for="(item,index) in dataImage"
						:key="index">
						<image :src="item.imgs"></image>
						<view>{{item.departmentname}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nuto"></view>
		<view class="term-biao">
			<view class="term-to">
				<text style="font-size: 34rpx;">大家都在学</text>
				<label>TOP6</label>
			</view>
			<view>
				<view class="box1">
					<view class="box2">
						<view class="li" :class="{die:ico == index}" @tap="tabBtn(item,index)"
							v-for="(item,index) in dataImage" :key="index">{{item.departmentname}}</view>
							
					</view>
					
				</view>
				<view v-if="dataList.length>0">
					<view class="term-flex dis" v-for="(item,index) in dataList" :key="index" @tap="look(item)">
						<image class="term-flex-img" :src="item.imgName"></image>
						<view style="width: 70%;">
							<view class="term-flex-tit">
								{{item.name}}
							</view>
							<view class="dis" style="margin-top: 50rpx;">
								<view class="term-left">学习币：{{item.currency || 0}}</view>
								<view class="term-right">查看详情</view>
							</view>
						</view>
					</view>
				</view>
				<u-divider style="margin-top: 100rpx;" v-else>暂无数据 ~</u-divider>
			</view>
		</view>
		<view>
			<view class="nuto"></view>
		</view>
		<view class="term-biao">
			<view class="term-to">
				<text style="font-size: 34rpx;">热门课程</text>
				<label>TOP10</label>
			</view>
			<view class="term-flex dis">
				<view class="left" v-for="(item,index) in keList" :key="index" @tap="look(item)">
					<!-- <image  mode="" :src="item.imgNameC"></image> -->
					<u-image width="100%" height="240rpx" :src="item.imgNameC"></u-image>
					<view class=""
						style="display: flex;flex-direction: column;justify-content: space-between;height: 150rpx;">
						<view class="tit" style="flex: 1;">{{item.name}}</view>
						<view class="term-left">学习币：{{item.currency}}</view>
					</view>
				</view>

			</view>
		</view>
		<!-- <u-gap height="32" bg-color="#F4F4F4"></u-gap> -->
		<view class="nuto"></view>
		<view class="term-biao">
			<view class="term-to">
				<text style="font-size: 34rpx;">线下活动</text>
			</view>
			<view>
				<view class="box1">
					<view class="box2">
						<view class="li" :class="{die:ico == index}" @tap="XINBtn(index,item)"
							v-for="(item,index) in tab1" :key="index">{{item.activityname}}</view>
					</view>
				</view>
				<view>
					<view class="term-flex dis" style="position: relative;" v-for="(item,index) in huoList"
						@tap="activityBtn(item)" :key="index">
						<image class="huo-img" :src="item.activitylog"></image>
						<view style=" width:58%;">
							<view class="huo-name u-line-1">{{item.titles}}</view>
							<view class="huo-tit u-line-2 u-m-t-10">
								{{item.introduction||''}}
							</view>
							<view class="huo-time">
								<label>{{item.activitydata}}</label>—
								<label>{{item.activitydata1}}</label>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dao">到底了~</view>
		<!-- <u-popup v-model="show" mode="bottom">
				微信授权登录
			<button class="sys_btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx">小程序登录授权</button>
	    </u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				listImage: [{
						name: '零售课堂',
						img: require('../../static/term/a.png'),
						url: '/pages/term/streaming/streaming'
					},
					{
						name: '节日说',
						img: require('../../static/term/b.png'),
						url: '/pages/term/festival/festival'
					},
					{
						name: '商品说',
						img: require('../../static/term/c.png'),
						url: '/pages/term/trade/trade'
					},
					{
						name: '知识竞赛',
						img: require('../../static/term/d.png'),
						url: '/pages/term/contest/contest'
					},
					{
						name: '学习币兑换',
						img: require('../../static/term/e.png'),
						url: '/pages/term/learning/learning'
					}
				],
				//岗位列表
				dataImage: [],
				//tab岗位
				tab: [],
				//活动类型
				tab1: ['活动类型', '活动类型', '活动类型'],
				/*
					大家都在学Top 6
				*/
				dataList: [],
				ico: 0,
				/**
				 * 热门课程
				 * */
				keList: [],
				seach: '', //搜索
				huoList: [],
				show: true,
				/*
					岗位id
				*/
				gid: 1,
				classid: 1
			}
		},
		computed:{
			userInfo(){
				return this.$store.state['userinfo']
			}
		},
		onReady() {

		},
		onShow() {
			if(this.token){
					this.addUserPost()
			}
			// this.getUserInfo()
			// if (uni.getStorageSync('token') != '') {
			// 	// 是否选择岗位
			// 	this.addUserPost()
			// 	this.selectUserMassges()
			// }
			// this.init()

		},
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		onLoad(option) {
		// 	console.log();
			uni.getStorage({
				key: 'sharUrl',
				success: (e) => {
					let path=e.data
					setTimeout(() => {
						this.$mHelper.to(path)
					}, 800);
					uni.removeStorage({
						key:'sharUrl'
					})
				}
			})
			if (option.type=='share') {
				let sharId=option.id
				if(!this.token){
					uni.setStorage({
						key: 'sharUrl',
						data: '/pages/term/course/course?id=' + sharId,
					})
				}else{
					this.$mHelper.to('/pages/term/course/course?id='+sharId)
				}
			}
			
			
			this.init()
		},
		methods: {
			init() {
				//查询岗位列表
				this.selectPost()
				this.selectPostList()
				////查询top 6

				// 查询热门10条数据(学习页面的推荐课程，所有课程)
				this.selectList()
				//查询首页轮播图列表
				this.CurriculumContrller()
				//查询全部活动类型
				this.selectActivitysType()
				//查询类型下活动
				this.selectActivitys()
			},
			selectPost() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/PostController/selectPostList',
					// header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						if (res.data.code == 200) {
							this.tab = res.data.data
							if (res.data.data.length) {
								this.gid = res.data.data[0].id
							}
							this.selectCourseList()
						} else {

						}
					},
					fail(err) {
					}
				})
			},
			selectActivitysType() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UnitPostContrller/selectActivitysType',
					// header:{'token':uni.getStorageSync('token')},
					success: (res) => {

						if (res.data.code == 200) {
							this.tab1 = res.data.data
						}
					}
				})
			},
			selectActivitys() {
				uni.showLoading({})
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UnitPostContrller/selectActivitys',
					data: {
						classid: this.classid
					},
					// header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						if (res.data.code == 200) {
							this.huoList = res.data.data
							uni.hideLoading()
						}

					}
				})
			},
			// selectUserMassges() {
			// 	uni.request({
			// 		method: 'GET',
			// 		url: this.$api + '/app/UserController/selectUserMassges',
			// 		header: {
			// 			'token': uni.getStorageSync('token')
			// 		},
			// 		success: (res) => {
			// 			if (res.data.code == 401) {
			// 			}
			// 			if (res.data.code == 200) {
			// 				uni.setStorageSync('user', res.data.data)
			// 				this.user = res.data.data
			// 				uni.setStorageSync('qi', res.data.data.characters)
			// 			}
			// 		}
			// 	})
			// },
			addUserPost() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/UserController/addUserPost',
					header: {
						'token': uni.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 200) {
							if(!res.data.data.pid){
								uni.navigateTo({
									url: '../study/choice/choice'
								})
								return
							}
							if(res.data.data.examination==false){
								this.$mHelper.schoolTest(res.data.data.pid)
							}
						} else {
							
						}
					},
					fail(err) {
					}
				})
			},
			CurriculumContrller() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/CurriculumContrller/list',
					success: (res) => {
						if (res.data.code == 200) {
							this.list = res.data.data
						} else {

						}
					},
					fail(err) {
					}
				})
			},
			//消息
			news() {

				this.$mHelper.to('/pages/term/news/news')
			},
			/**
			 * 打卡
			 * */
			punch() {
				this.$mHelper.to('/pagesA/card/card?type=1')
			},
			//搜索
			seek() {
				this.$mHelper.to('/pages/term/seek/seek')
			},
			/*
				// 查询热门10条数据(学习页面的推荐课程，所有课程)
			*/
			selectList() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/CurriculumContrller/selectList',
					// header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						if (res.data.code == 200) {
							this.keList = res.data.data

						} else {

						}
					},
					fail(err) {
					}
				})
			},
			//查询岗位列表
			selectPostList() {
				uni.request({
					method: 'GET',
					url: this.$api + '/app/DepartmentController/selectAllsD',
					// header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						if (res.data.code == 200) {
							this.dataImage = res.data.data
							if(res.data.data.length){
								this.selectCourseList()
							}
							// res.data.data.forEach((item,index) => {
							// 	this.tab.push({
							// 		name:item.jname,
							// 		id:item.id
							// 	})
							// })

						} else {

						}
					},
					fail(err) {
					}
				})
			},




			//查询top 6
			selectCourseList() {
				// uni.setStorageSync('gid',this.gid);
				uni.request({
					method: 'GET',
					url: this.$api + '/app/PostController/selectDepartmentAll',
					data: {
						did: this.dataImage[this.ico].id,
						page:1,
						num:6
					},
					// header:{'token':uni.getStorageSync('token')},
					success: (res) => {
						if (res.data.code == 200) {
							this.dataList = res.data.data

						} else {

						}
					},
					fail(err) {
					}
				})
			},
			term(i) {
				this.$mHelper.to(i.url)
			},
			term1(i) {

				this.$mHelper.to('/pages/map/courseList/courseList?id=' + i.id + '&name=' + i.departmentname)
			},
			//课程详情
			look(i) {
				this.$mHelper.to('/pages/term/course/course?id=' + i.id + '&pid=' + i.pid)
			},
			// tab
			tabBtn(i, k) {
				this.ico = k
				this.gid = i.id
				this.selectCourseList()
				// uni.showLoading({
				// 	title:'正在加载中...'
				// })
				// setTimeout(() => {
				// 	uni.hideLoading()
				// },1000)
			},
			XINBtn(i, item) {
				this.ico = i

				this.classid = item.id
				this.selectActivitys()

			},
			//活动详情
			activityBtn(i) {
				uni.setStorage({
					key: 'activeDetail',
					data: i,
					success: (e) => {
						this.$mHelper.to('/pages/term/activity/activity' )
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.huo-img {
		width: 260rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.huo-name {
		font-size: 32rpx;
		font-weight: bold;
		// margin-bottom: 15rpx;
	}

	.huo-time {
		border-top-left-radius: 20rpx;
		background: #00A29A;
		border-bottom-right-radius: 20rpx;
		color: #FFFFFF;
		position: absolute;
		padding: 3rpx 15rpx;
		bottom: 0;
		font-size: 24rpx;
	}

	.huo-tit {
		font-size: 24rpx;
		color: #666666;
	}

	.left {
		width: 48%;
		margin-bottom: 52rpx;

		image {
			width: 100%;
			height: 240rpx;
			border-radius: 15rpx;
		}

		.tit {
			margin-top: 10rpx;
			margin-bottom: 25rpx;
		}
	}

	.term-left {
		width: 200rpx;
		height: 48rpx;
		background: #D9F6FF;
		text-align: center;
		font-size: 24rpx;
		line-height: 45rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 0 10rpx;
		color: #00A29A;
	}

	.term-flex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;

		.term-flex-img {
			width: 180rpx;
			height: 180rpx;
			margin-right: 15rpx;
			border-radius: 10rpx;
		}

		.term-flex-tit {
			font-size: 30rpx;
			color: #333333;

		}

		.term-left {
			background: #D9F6FF;
			font-size: 24rpx;
			line-height: 45rpx;
			border-top-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			padding: 0 10rpx;
			color: #00A29A;
		}

		.term-right {
			border: 1rpx solid #00A29A;
			color: #00A29A;
			font-size: 24rpx;
			padding: 4rpx 15rpx;
		}
	}

	.inp {
		width: 80%;
		position: relative;
		margin-right: 25rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			left: 20rpx;
			top: 18rpx;
		}

		input {
			// width: 100%;
			background: rgba(255, 255, 255, 0.5);
			color: #FFFFFF;
			border: 1rpx solid #FFFFFF;
			border-radius: 30rpx;
			font-size: 28rpx;
			height: 65rpx;
			padding-left: 65rpx;
		}
	}

	.die {
		background-color: #E5F8F7;
		border-radius: 30rpx;
		height: 60rpx;
	}

	.box1 {
		width: 100%;
		overflow-y: hidden;
		overflow-x: scroll;
		margin-top: 25rpx;
		/* position: relative; */
	}

	.box2 {
		display: flex;
		/* position: absolute; */
	}

	.box2 .li {
		width: 25%;
		height: 60rpx;
		flex-shrink: 0;
		line-height: 60rpx;
		text-align: center;
		color: #333333;
	}

	.term-biao {
		padding: 25rpx;
		margin-top: 20rpx;
	}

	.term-to {
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #15aaa2;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 5rpx 15rpx;

		label {
			color: #FFD057;
			margin-left: 20rpx;
		}
	}

	.list {
		display: flex;
		flex-wrap: wrap;

		.flex {
			// border: 1rpx solid red;
			width: 20%;
			// background-color: #007AFF;
			text-align: center;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
			}
		}

	}

	.term-bei {
		height: 50rpx;
		background-color: #15aaa2;
		position: absolute;
		bottom: -24px;
		width: 50%;
		right: 0;
	}

	.term-yuan {
		height: 50rpx;
		background-color: #ffffff;
		border-top-right-radius: 55rpx;
		position: absolute;
		bottom: -4rpx;
		right: 1rpx;
		width: 100%;

	}

	.term-list {
		background-color: #FFFFFF;
		padding: 20rpx 25rpx;
		z-index: 100;
		// box-shadow: 5rpx 5rpx #e3e3e3;
	}

	.item {
		width: 100%;
		height: 300rpx;

		// border-radius: 20rpx;
		image {
			width: 100%;
			height: 250rpx;
			border-radius: 20rpx;
		}
	}

	.term {
		height: calc(var);

		.lv {
			// border: 1rpx solid red;
			height: 640rpx;
			// background-color: #15aaa2;
			padding-bottom: 40rpx;
			padding-top: 40rpx;
			width: 100%;
			position: relative;
			background-image: url(../../static/images/index_back.png);
			background-size: 100% 100%;
		}

		.bei {
			width: 100%;
			position: absolute;
			top: 0;
			border-bottom-left-radius: 55rpx;
		}

		.term-center {
			width: 92%;
			z-index: 999;
			margin-left: 4%;
			margin-top: 60rpx;

			.term-img-logo {
				width: 129rpx;
				height: 70rpx;
			}

			color: #FFFFFF;
		}

	}
</style>
